<template>
  <div class="settings-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="settings-menu">
          <template #header>
            <div class="menu-header">
              <el-icon><Setting /></el-icon>
              <span>系统设置</span>
            </div>
          </template>
          <el-menu
            :default-active="activeMenu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="site">
              <el-icon><Monitor /></el-icon>
              <span>网站设置</span>
            </el-menu-item>
            <el-menu-item index="theme">
              <el-icon><Brush /></el-icon>
              <span>主题设置</span>
            </el-menu-item>
            <el-menu-item index="security">
              <el-icon><Lock /></el-icon>
              <span>安全设置</span>
            </el-menu-item>
            <el-menu-item index="storage">
              <el-icon><FolderOpened /></el-icon>
              <span>存储设置</span>
            </el-menu-item>
            <el-menu-item index="log">
              <el-icon><Document /></el-icon>
              <span>日志设置</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card>
          <!-- 网站设置 -->
          <div v-show="activeMenu === 'site'" class="settings-section">
            <h2 class="section-title">网站设置</h2>
            <el-form :model="siteForm" label-width="120px">
              <el-form-item label="网站名称">
                <el-input v-model="siteForm.siteName" />
              </el-form-item>
              <el-form-item label="网站描述">
                <el-input
                  v-model="siteForm.description"
                  type="textarea"
                  :rows="3"
                />
              </el-form-item>
              <el-form-item label="网站Logo">
                <el-upload
                  class="logo-uploader"
                  action="/api/upload"
                  :show-file-list="false"
                  :before-upload="beforeLogoUpload"
                  :on-success="handleLogoSuccess"
                >
                  <img v-if="siteForm.logo" :src="siteForm.logo" class="logo" />
                  <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
                </el-upload>
              </el-form-item>
              <el-form-item label="备案信息">
                <el-input v-model="siteForm.icp" />
              </el-form-item>
              <el-form-item label="客服电话">
                <el-input v-model="siteForm.servicePhone" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSiteSettings">保存设置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 主题设置 -->
          <div v-show="activeMenu === 'theme'" class="settings-section">
            <h2 class="section-title">主题设置</h2>
            <el-form :model="themeForm" label-width="120px">
              <el-form-item label="主题模式">
                <el-radio-group v-model="themeForm.mode">
                  <el-radio-button label="light">浅色</el-radio-button>
                  <el-radio-button label="dark">深色</el-radio-button>
                  <el-radio-button label="auto">跟随系统</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="主题色">
                <el-color-picker v-model="themeForm.primary" />
              </el-form-item>
              <el-form-item label="导航模式">
                <el-radio-group v-model="themeForm.layout">
                  <el-radio label="side">侧边菜单</el-radio>
                  <el-radio label="top">顶部菜单</el-radio>
                  <el-radio label="mix">混合菜单</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="内容区域">
                <el-checkbox-group v-model="themeForm.features">
                  <el-checkbox label="breadcrumb">显示面包屑</el-checkbox>
                  <el-checkbox label="tabs">显示标签页</el-checkbox>
                  <el-checkbox label="footer">显示页脚</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveThemeSettings">保存设置</el-button>
                <el-button @click="resetThemeSettings">恢复默认</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 安全设置 -->
          <div v-show="activeMenu === 'security'" class="settings-section">
            <h2 class="section-title">安全设置</h2>
            <el-form :model="securityForm" label-width="160px">
              <el-form-item label="密码安全策略">
                <el-checkbox-group v-model="securityForm.passwordPolicy">
                  <div class="checkbox-item">
                    <el-checkbox label="length">密码长度不少于8位</el-checkbox>
                  </div>
                  <div class="checkbox-item">
                    <el-checkbox label="complexity">必须包含字母和数字</el-checkbox>
                  </div>
                  <div class="checkbox-item">
                    <el-checkbox label="special">必须包含特殊字符</el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="登录安全">
                <el-checkbox-group v-model="securityForm.loginSecurity">
                  <div class="checkbox-item">
                    <el-checkbox label="captcha">开启登录验证码</el-checkbox>
                  </div>
                  <div class="checkbox-item">
                    <el-checkbox label="twoFactor">开启双因素认证</el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="登录失败锁定">
                <el-input-number 
                  v-model="securityForm.lockCount"
                  :min="3"
                  :max="10"
                />
                <span class="form-tip">次后锁定账号</span>
              </el-form-item>
              <el-form-item label="锁定时长">
                <el-input-number 
                  v-model="securityForm.lockTime"
                  :min="5"
                  :max="60"
                />
                <span class="form-tip">分钟</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 存储设置 -->
          <div v-show="activeMenu === 'storage'" class="settings-section">
            <h2 class="section-title">存储设置</h2>
            <el-form :model="storageForm" label-width="120px">
              <el-form-item label="存储方式">
                <el-radio-group v-model="storageForm.type">
                  <el-radio label="local">本地存储</el-radio>
                  <el-radio label="oss">阿里云OSS</el-radio>
                  <el-radio label="cos">腾讯云COS</el-radio>
                  <el-radio label="qiniu">七牛云</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <!-- OSS配置 -->
              <template v-if="storageForm.type === 'oss'">
                <el-form-item label="AccessKey">
                  <el-input v-model="storageForm.oss.accessKey" />
                </el-form-item>
                <el-form-item label="SecretKey">
                  <el-input v-model="storageForm.oss.secretKey" show-password />
                </el-form-item>
                <el-form-item label="Bucket">
                  <el-input v-model="storageForm.oss.bucket" />
                </el-form-item>
                <el-form-item label="区域">
                  <el-input v-model="storageForm.oss.region" />
                </el-form-item>
                <el-form-item label="域名">
                  <el-input v-model="storageForm.oss.domain" />
                </el-form-item>
              </template>
              
              <el-form-item>
                <el-button type="primary" @click="saveStorageSettings">保存设置</el-button>
                <el-button 
                  v-if="storageForm.type !== 'local'"
                  @click="testStorageConnection"
                >
                  测试连接
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 日志设置 -->
          <div v-show="activeMenu === 'log'" class="settings-section">
            <h2 class="section-title">日志设置</h2>
            <el-form :model="logForm" label-width="120px">
              <el-form-item label="日志保存时间">
                <el-input-number 
                  v-model="logForm.keepDays"
                  :min="7"
                  :max="180"
                />
                <span class="form-tip">天</span>
              </el-form-item>
              <el-form-item label="记录类型">
                <el-checkbox-group v-model="logForm.types">
                  <el-checkbox label="login">登录日志</el-checkbox>
                  <el-checkbox label="operation">操作日志</el-checkbox>
                  <el-checkbox label="error">错误日志</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="日志级别">
                <el-select v-model="logForm.level">
                  <el-option label="DEBUG" value="debug" />
                  <el-option label="INFO" value="info" />
                  <el-option label="WARN" value="warn" />
                  <el-option label="ERROR" value="error" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveLogSettings">保存设置</el-button>
                <el-button @click="clearLogs" type="danger">清理日志</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { 
  Setting, Monitor, Brush, Lock, FolderOpened, Document, Plus 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {
  currentTheme,
  setThemeMode,
  setThemePrimary,
  setThemeLayout,
  setThemeFeatures,
  resetTheme
} from '@/utils/theme'

const activeMenu = ref('site')

// 网站设置
const siteForm = reactive({
  siteName: '巨蜥云管理平台',
  description: '专业的企业级管理系统',
  logo: '',
  icp: '粤ICP备xxxxxxxx号',
  servicePhone: '400-xxx-xxxx'
})

// 主题设置
const themeForm = reactive({
  mode: currentTheme.value.mode,
  primary: currentTheme.value.primary,
  layout: currentTheme.value.layout,
  features: [...currentTheme.value.features]
})

// 安全设置
const securityForm = reactive({
  passwordPolicy: ['length', 'complexity'],
  loginSecurity: ['captcha'],
  lockCount: 5,
  lockTime: 30
})

// 存储设置
const storageForm = reactive({
  type: 'local',
  oss: {
    accessKey: '',
    secretKey: '',
    bucket: '',
    region: '',
    domain: ''
  }
})

// 日志设置
const logForm = reactive({
  keepDays: 30,
  types: ['login', 'operation', 'error'],
  level: 'info'
})

// 菜单切换
const handleMenuSelect = (index: string) => {
  activeMenu.value = index
}

// Logo上传
const beforeLogoUpload = (file: File) => {
  const isImage = /^image\//.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
  }
  return isImage && isLt2M
}

const handleLogoSuccess = (res: any) => {
  siteForm.logo = res.url
  ElMessage.success('Logo上传成功')
}

// 保存设置
const saveSiteSettings = () => {
  ElMessage.success('网站设置保存成功')
}

// 保存主题设置
const saveThemeSettings = () => {
  setThemeMode(themeForm.mode)
  setThemePrimary(themeForm.primary)
  setThemeLayout(themeForm.layout)
  setThemeFeatures(themeForm.features)
  ElMessage.success('主题设置保存成功')
}

// 重置主题
const resetThemeSettings = () => {
  resetTheme()
  Object.assign(themeForm, currentTheme.value)
  ElMessage.success('主题已重置')
}

const saveSecuritySettings = () => {
  ElMessage.success('安全设置保存成功')
}

const saveStorageSettings = () => {
  ElMessage.success('存储设置保存成功')
}

const saveLogSettings = () => {
  ElMessage.success('日志设置保存成功')
}

// 其他操作
const testStorageConnection = () => {
  ElMessage.success('连接测试成功')
}

const clearLogs = () => {
  ElMessage.success('日志清理成功')
}

onMounted(() => {
  // 同步当前主题设置
  Object.assign(themeForm, currentTheme.value)
})
</script>

<style scoped lang="scss">
.settings-container {
  .settings-menu {
    .menu-header {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
    
    .el-menu {
      border-right: none;
      
      .el-menu-item {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        
        .el-icon {
          margin-right: 8px;
          font-size: 16px;
        }
        
        &.is-active {
          background-color: #ecf5ff;
        }
      }
    }
  }
  
  .settings-section {
    .section-title {
      margin: 0 0 20px;
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
    
    .checkbox-item {
      margin-bottom: 8px;
    }
    
    .form-tip {
      margin-left: 8px;
      color: #909399;
    }
  }
  
  .logo-uploader {
    .logo {
      width: 120px;
      height: 120px;
      border-radius: 4px;
    }
    
    .logo-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      text-align: center;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        border-color: #409EFF;
      }
    }
  }
}
</style> 